// 我的点赞页面

import './index.less';
import {View} from "@tarojs/components";
import {useEffect, useState} from "react";
import {Api} from "../../api/api";
import {wxActions} from "../../utils/wxActions";
import {MyAch} from "../../components/MyAch";
import Taro, {usePullDownRefresh, useReachBottom} from "@tarojs/taro";

export default function MyLike() {
    const [achList, setAchList] = useState([]); // 成果列表
    const [pageIndex, setPageIndex] = useState(1); // 页码
    const [total, setTotal] = useState(0); // 总数

    useEffect(() => {
        Api.getMyLike({
            pageSize: 10,
            pageNum: 1
        }).then(res => {
            setAchList(res.rows);
            setTotal(res.total);
        })
    }, []);

    // 刷新
    const refresh = (func) => {
        wxActions.showLoading('加载中');
        Api.getMyLike({
            pageSize: 10,
            pageNum: 1
        }).then(res => {
            setAchList(res.rows);
            setTotal(res.total);
            setPageIndex(1);
        }).catch((err) => {
            wxActions.showTip(err.message);
        }).finally(() => {
            Taro.hideLoading();
            func && func();
        });
    }

    // 下拉刷新
    usePullDownRefresh(() => {
         refresh(() => {
            Taro.stopPullDownRefresh();
        });
    });

    // 下触底事件
    useReachBottom(() => {
        if (pageIndex * 10 >= total) {
            return;
        }
        wxActions.showLoading('加载中');
        Api.getMyLike({
            pageSize: 10,
            pageNum: pageIndex + 1
        }).then(res => {
            setAchList([...achList, ...res.rows]);
            setPageIndex(pageIndex + 1);
        }).finally(() => {
            Taro.hideLoading();
        });
    });

    return (
        <View className='myLike'>
            <View className={"myLikeList"}>
                {
                    achList.map((item, index) => {
                        return <MyAch key={index} achObj={item}/>
                    })
                }
            </View>
        </View>
    )
}
